<template>
  <div class="app-container">
    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>处理进度</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-steps :active="[0,1,2][suggest.suggestStatus]" align-center>
          <el-step title="指派中"></el-step>
          <el-step title="处理中"></el-step>
          <el-step title="已完成"></el-step>
        </el-steps>
      </el-col>
    </el-row>

    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>投诉信息</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          投诉单号：
          <div class="list-item-txt">{{ suggest.suggestCode }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          投诉人：
          <div class="list-item-txt">{{ suggest.name }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          处理人：
          <div class="list-item-txt">{{ suggest.sysUser?suggest.sysUser.nickName:'' }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-item">
          投诉时间：
          <div class="list-item-txt">{{ suggest.createTime }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          描述：
          <div class="list-item-txt">{{ suggest.details }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-item">
          状态：
          <div class="list-item-txt">
            <dict-tag :options="dict.type.suggest_status" :value="suggest.suggestStatus"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="infoTitle"></div>

    <el-row class="infoTitle">
      <el-col :span="24">
        <div>
          <span>处理记录</span>
        </div>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="suggestrecordList">
      <el-table-column label="序号" align="center" prop="id"/>
      <el-table-column label="反馈状态" align="center" prop="suggestStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.suggest_status" :value="scope.row.suggestStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="记录" align="center" prop="remark"/>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<style>
  .el-steps--horizontal {
    width: 120%;
    margin-left: -10%;
  }

  .el-step__head.is-success {
    color: #009FFF;
  }

  .el-step__icon.is-text {
    width: 10px;
    height: 10px;
    overflow: hidden;
    top: 2px;
  }

  .el-step__head.is-finish .el-step__icon.is-text {
    background: #1890FF;
  }

  .el-step__head.is-process .el-step__icon.is-text {
    background: #303133;
  }

  .el-step__head.is-wait .el-step__icon.is-text {
    background: #C0C4CC;
  }
</style>
<script>
  import {getSuggest} from "@/api/suggest/suggest";
  import {listSuggestrecord} from "@/api/suggest/suggestrecord";

  export default {
    name: "Suggestrecord",
    dicts: ['suggest_status'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        suggest: {},

        // 维修记录表格数据
        suggestrecordList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          suggestId: this.$route.query.id
        },
        value:4.5
      };
    },
    created() {
      this.getList();
      this.getRecord();
    },
    methods: {
      getList() {
        getSuggest(this.$route.query.id).then(response => {
          this.suggest = response.data;
        });
      },
      /** 查询维修记录列表 */
      getRecord() {
        this.loading = true;
        listSuggestrecord(this.queryParams).then(response => {
          this.suggestrecordList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    }
  };
</script>

